<template>
  <div class="basic-content">
    <el-table
      ref="excelTable"
      :data="listform.list"
      style="width: 100%; margin-bottom: 20px"
      border
      height="650px"
    >
      <el-table-column
        label="指标名称"
        prop="name"
        align="center"
        min-width="330"
      >
        <template slot-scope="scope">
          <div class="extext-area" v-if="scope.row.numType === 3">
            <span>{{ scope.row.name }}</span>
            <span>{{ scope.row.extext }}</span>
          </div>
          <div v-else class="name-area">
            <span
              :class="
                scope.row.isChildren === 1
                  ? 'children1'
                  : scope.row.isChildren === 2
                  ? 'children2'
                  : scope.row.isChildren === 3
                  ? 'children3'
                  : scope.row.isChildren === 4
                  ? 'children4'
                  : scope.row.isChildren === 5
                  ? 'children5'
                  : ''
              "
            >
              {{
                scope.row.isChildren === 3
                  ? "其中：" + scope.row.name
                  : scope.row.name
              }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="计量单位" prop="unit" align="center" width="100">
      </el-table-column>
      <!-- <el-table-column
              label="代码"
              prop="value"
              width="100"
              align="center"
            >
            </el-table-column> -->
      <el-table-column label="合计" prop="field0" width="160" align="center">
      </el-table-column>
      <el-table-column
        label="国家机关"
        prop="field1"
        width="160"
        align="center"
      >
      </el-table-column>
      <el-table-column label="事业单位" prop="" align="center" width="160">
        <el-table-column label="小计" prop="field2" align="center" width="160">
        </el-table-column>
        <el-table-column label="教育" prop="field3" align="center" width="160">
        </el-table-column>
        <el-table-column label="科技" prop="field4" align="center" width="160">
        </el-table-column>
        <el-table-column label="文化" prop="field5" align="center" width="160">
        </el-table-column>
        <el-table-column label="卫生" prop="field6" align="center" width="160">
        </el-table-column>
        <el-table-column label="体育" prop="field7" align="center" width="160">
        </el-table-column>
        <el-table-column label="其他" prop="field8" align="center" width="160">
        </el-table-column>
      </el-table-column>
      <el-table-column
        label="团体组织"
        prop="field9"
        align="center"
        width="160"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import tableConst from "@/views/work/accounts/components/tableConst3.js";
import {
  deepClone,
  replaceInteger,
  replaceDigit,
  dealElectricity,
} from "@/utils/index";
import { comprehensive } from "@/api/standingbook/newstandingbook.js";
export default {
  props: {},
  components: {},
  data() {
    return {
      listform: {
        principalUnit: "",
        principalStatistics: "",
        formPepole: "",
        phone: "",
        date: "",
        list: [],
      },
    };
  },

  mounted() {
    this.judgedisabledFlage();
  },
  methods: {
    judgedisabledFlage() {
      let query = this.$route.query;
      // 查看详情
      if (query.id && String(query.id).length > 0) {
        this.getData(query);
      }
    },
    getData(query) {
      comprehensive(query.id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let newData = res?.data?.list ?? [];
          let arr = tableConst.tableData;
          if (newData.length > 0) {
            newData.map((it, i) => {
              for (let key in it) {
                arr.map((item) => {
                  if (item.fields == key) {
                    if (item.numType == 1) {
                      item["field" + i] = String(it[key]);
                    } else {
                      item["field" + i] = dealElectricity(it[key], 1, 2);
                    }
                  }
                  return item;
                });
              }
              return it;
            });
          }
          this.listform.list = arr;
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //row:对象形式，保存了当前行的数据
      //column：对象形式，保存了当前列的参数
      //rowIndex:当前行的行号
      //column：当前列的列号
      if (rowIndex === 48) {
        if (columnIndex === 0) {
          return [1, 3];
        } else if (columnIndex === 1) {
          return [0, 0];
        } else if (columnIndex === 2) {
          return [1, 5];
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-content {
  width: 100%;

  ::v-deep .title {
    margin-top: 20px;
    .el-tag {
      margin-right: 10px !important;
      margin-bottom: 20px;
    }
  }
}
.row-inline {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
// .table-border-line {
//   border-top: 4px solid #d2d2d8;
//   border-bottom: 4px solid #d2d2d8;
//   // padding: 20px 0 10px 0;
//   // padding-top: 10px;
//   margin-bottom: 10px;
// }
.cellCenter {
  margin-top: 0px;
  margin-bottom: 0;
  .el-input {
    width: 200px;
  }
}
.extext-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  span {
    &:nth-child(2) {
      margin-top: 20px;
    }
  }
}
.name-area {
  display: flex;
  align-items: flex-start;
  margin-left: 5px;
  .children1 {
    margin-left: 20px;
  }
  .children2 {
    margin-left: 40px;
  }
  .children3 {
    margin-left: 40px;
  }
  .children4 {
    margin-left: 100px;
  }
  .children5 {
    margin-left: 85px;
  }
}
</style>
